<template>
  <div>
    <!--div class="m-tabs-card">
      <div class="m-tabs-header">
        <div v-for="(item,index) in tabData" 
        @click="tabClick($event, index)"
        :class="activedIndex == index ? 'm-tab-title m-tab-title-seleted':'m-tab-title'" 
        :key="item.id">
          {{item.title}}
        </div>
      </div>
      <div class="m-tabs-body">
        <div v-for="(item,index) in tabData" :key="item.id" 
        :class="activedIndex == index ? 'm-tab-panel' : 'm-tab-panel  m-hide'">
          {{item.content}}
        </div>
      </div>
    </div-->
    <Tabs activeName="1">
      <TabPane name="1" title="标题一">内容一</TabPane>
      <TabPane name="2" title="标题二">内容二</TabPane>
      <TabPane name="3" title="标题三">内容三</TabPane>
    </Tabs>
    <Tabs activeName="1" @on-tab-change="handleTabChange">
      <TabPane name="1" title="标题一">内容一</TabPane>
      <TabPane name="2" title="标题二">内容二</TabPane>
      <TabPane name="3" title="标题三">内容三</TabPane>
      <TabPane name="4" title="标题四">内容四</TabPane>
    </Tabs>
  </div>
</template>

<script>
import Tabs from './components/tabs/Tabs.vue'
import TabPane from './components/tabs/TabPane.vue'

export default {
  name: 'App',
  components: {
    Tabs,
    TabPane
  },
  data() {
    return {
      activedIndex: 0,// 定义当前选中的索引值
      tabData: [ // 定义Tab面板数据
        {
          id: 1,
          title: '标题一',
          content: '内容一'
        },
        {
          id: 2,
          title: '标题二',
          content: '内容二'
        },
        {
          id: 3,
          title: '标题三',
          content: '内容三'
        }
      ]
    }
  },
  methods: {
    // 处理Tab点击事件
    tabClick(e, index) {
      this.activedIndex = index
    },
    // tab切换事件回调处理
    handleTabChange(item) {
      console.log(item)
    }
  }
}
</script>

<!--style scoped>
.m-tabs-header{
  height: 40px;
  border: 1px solid #cccccc;
  display: flex;
  background: #eeeeee;
}
.m-tab-title{
  padding-left: 18px;
  padding-right: 18px;
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 14px;
  border-right: 1px solid #cccccc;
  cursor: pointer;
}
.m-tab-title-seleted{
  color: #ffffff;
  background: #3778bc;
}
.m-tabs-body{
  border: 1px solid #cccccc;
  border-top: none;
}
.m-hide{
  display: none;
}
</style-->